<script setup>
import { useTemplateRef } from 'vue'

/** 暴露函数 */

defineExpose({
  removeAnimate,
  addAnimate,
})

/** 动画 */

const ani001 = useTemplateRef('ani-001')
const ani002 = useTemplateRef('ani-002')
const ani003 = useTemplateRef('ani-003')

function removeAnimate() {
  // 移除所有动画类
  ani001.value.classList.remove('animate__backInLeft')
  ani002.value.classList.remove('animate__backInRight')
  ani003.value.classList.remove('sealAnimation')
}

function addAnimate() {
  // 添加动画类
  // 下一帧重新添加动画类
  requestAnimationFrame(() => {
    ani001.value.classList.add('animate__backInLeft')
    ani002.value.classList.add('animate__backInRight')
    ani003.value.classList.add('sealAnimation')
  })
}
</script>
<template>
  <div class="box">
    <div class="left animate__animated" ref="ani-001">
      <p>期</p>
      <p>待</p>
      <p>与</p>
      <p>你</p>
      <p>共</p>
      <p>书</p>
      <p>春</p>
      <p>秋</p>
    </div>
    <div class="right animate__animated" ref="ani-002">
      <p>翰</p>
      <p>墨</p>
      <p>缘</p>
      <p>起</p>
    </div>

    <img
      id="seal"
      class="animate__animated"
      ref="ani-003"
      src="@/assets/image/seal.png"
      style="width: 1.5rem"
    />
  </div>
</template>
<style scoped>
.box {
  position: absolute;
  top: 5%;
  left: 5%;
  width: 90%;
  height: 90%;
}

.box .left {
  position: absolute;
  left: calc(50% - 1rem);
  top: 5rem;

  font-size: 0.7rem;
  font-family: 'wangxizhi';
}

.box .right {
  position: absolute;
  left: calc(50% + 0.5rem);
  top: 1rem;
  transform: translateX(-50%);
  font-size: 2rem;
  font-family: 'wangxizhi';
}

.box #seal {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
}

.sealAnimation {
  animation: sealAnimation 2s ease-out forwards;
}

@keyframes sealAnimation {
  0% {
    transform: scale(3);
    opacity: 0;
  }
  50% {
    transform: scale(2);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
</style>
